<template>
  <basic-container>
    <div style="text-align:right;margin-bottom:20px;">
      <el-button type="primary" @click="addWithdraw">新增提现</el-button>
    </div>
    <div>
      <h3>处理中的提现</h3>
    </div>
    <el-table :data="tableData5" style="width: 100%" border align="center">
      <el-table-column prop="cashName" label="提现方式" border align="center"></el-table-column>
      <el-table-column prop="account" label="提现账号" border align="center"></el-table-column>
      <el-table-column prop="amount" label="提现金额" border align="center"></el-table-column>
      <el-table-column prop="time" label="提现申请时间" border align="center"></el-table-column>
      <el-table-column label="状态" border align="center">
        <template slot-scope="scope">
          <el-tag>{{scope.row.stateName}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align:right;margin-top:15px;"
    ></el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-form ref="form" :model="form" label-width="80px" style="width:50%" :rules="rules">
          <el-form-item label="钱包余额">
            <el-input v-model="form.remain" placeholder disabled></el-input>
          </el-form-item>
          <el-form-item label="提现金额" prop="name">
            <el-input v-model="form.name" placeholder="最少1元" type="number"></el-input>
          </el-form-item>
          <el-form-item label="提现方式" prop="region">
            <el-select v-model="form.region" placeholder="请选择提现方式">
              <el-option label="支付宝" value="1"></el-option>
              <el-option label="银行卡" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="提现账号" prop="account">
            <el-input v-model="form.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item style="text-align:center">
            <span>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import { userWithdrawList, addWithdraw } from "@/api/tool/withdraw";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      tableData5: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10,
      dialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        account: "",
        remain: "30000元"
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入提现金额",
            trigger: "blur"
          }
        ],
        region: [
          {
            required: true,
            message: "请选择提现方式",
            trigger: "change"
          }
        ],
        account: [
          {
            required: true,
            message: "请输入提现账号",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.dataInit();
  },
  methods: {
    dataInit() {
      userWithdrawList(this.page, this.limit).then(res => {
        console.log(res);
        this.tableData5 = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //   alert("submit!");
          var tenantCash = {};
          tenantCash.account = this.form.account;
          tenantCash.amount = this.form.name;
          tenantCash.type = this.form.region;
          addWithdraw(tenantCash).then(res => {
            console.log("提现开始");
            console.log(res);
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this.dialogVisible = false;
            this.page = 1;
            this.limit = 10;
            this.total = 0;
            this.dataInit();
            // window.location.reload();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    addWithdraw() {
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.limit = val;
      this.dataInit();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.dataInit();
    }
  }
};
</script>

<style>
</style>
